<template>
  <hello-world></hello-world>
  <div>
    <!-- Home页面鼠标位置：x=>{{ x }},y=>{{ y }} -->
    <!-- <button>{{ $translate('submit') }}</button> -->
    <div v-bind="attrObj">
      {{ num }}
    </div>
    <button @click="addNum">+1</button>

    <div>
      <h2>用户信息</h2>
      <div>{{ obj.name }}</div>
      <div>{{ obj.age }}</div>
    </div>
    <button @click="addAge">+10</button>

    <div v-html="htmlStr"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ref } from 'vue'
// import cusMouse from '@/utils/mouse'
interface IUser{
  name: string
  age: number
}
export default defineComponent ({
  name:'Home',
  // computed: {
  //   result: {
  //     get() {
  //       return num1.value + num2.value
  //     }
  //     set() {

  //     }
  //   }
  // },
  setup() {
    let num= ref<number>(0)
    console.log(num)
    const addNum = () => {
      num.value +=1
    }
    // const {x,y} = cusMouse()
    // console.log(x.value, y.value)
    const obj = ref<IUser>({
      name: '张学友',
      age: 50
    })
    const addAge = () => {
      obj.value.age += 10
    }
    return {
      num,
      addNum,
      obj,
      addAge,
      htmlStr: '<span style="color:red">Html字符串</span>',
      attrObj: {
        id: 'demo',
        class: 'cus-demo'
      }
    }
  }
  // data() {
  //   return {
  //     name: '张学友',
  //     htmlStr: '<span style="color:red">Html字符串</span>',
  //     attrObj: {
  //       id: 'demo',
  //       class: 'cus-demo'
  //     }
  //   }
  // }
})
</script>
<style lang="scss">
.cus-demo{
  color: #0000FF;
}
</style>